<template>
  <NuxtLayout
    name="uni"
    title="检测结果概述"
    :subTitle="station"
  >
    <div>
      <!-- 项目信息 -->
      <div class="info">
        <!-- 信息图片 -->
        <div class="info__img uni-shadow">
          <!-- 图片容器 -->
          <div class="img">
            <!-- 检测前的图片 -->
            <div class="img__origin">
              <el-image
                style="width: 100%; height: 100%"
                src="/img/222.jpg"
                fit="cover"
              />
            </div>
            <!-- 检测完成的图片 -->
            <div class="img__detected">
              <el-image
                style="width: 100%; height: 100%"
                src="/img/111.jpg"
                fit="cover"
              />
            </div>
          </div>
        </div>
        <!-- 信息总结 -->
        <div class="info__summary uni-shadow">
          <UniTitleBox
            title="检测概述"
            style="height: 100%"
          >
            <div
              class="p-2"
              style="height: 90%"
            >
              <ElScrollbar>
                <div v-for="item in 200">{{ item }}</div>
              </ElScrollbar>
            </div>
          </UniTitleBox>
        </div>
      </div>
      <!-- 项目提示栏 -->
      <div class="tips uni-shadow">
        <!-- 提示栏>图例栏 -->
        <div class="text-lg font-bold">检测图例</div>
        <!-- 图例 -->
        <div class="legend">
          <!-- 图例项 -->
          <div
            class="legend__item"
            v-for="item in legend"
          >
            {{ item.label }}
            <div
              class="w-3 h-3"
              :style="{ backgroundColor: item.color }"
            ></div>
          </div>
        </div>
      </div>
      <!-- 项目检测项列表 -->
      <div class="uni-shadow p-4">
        <UniTitleBox
          title="损伤情况汇总"
          :titleClass="['text-sm']"
          borderColor="#b65d5a"
          style="height: 280px"
        >
          <template #subTitle>
            <div>
              <ElButton type="primary">导出</ElButton>
              <ElButton type="danger">删除</ElButton>
            </div>
          </template>

          <!-- 容器  -->
          <div
            style="height: 100%"
            class="p-2"
          >
            <el-table
              :data="tableData"
              style="width: 100%"
              height="90%"
              border
            >
              <el-table-column type="selection" />
              <el-table-column
                prop="id"
                label="损伤ID"
              />
              <el-table-column
                prop="date"
                label="损伤部位"
              />
              <el-table-column
                prop="name"
                label="损伤等级"
              />
              <el-table-column
                prop="time"
                label="尺寸"
              />
              <el-table-column
                prop="id"
                label="图片"
              >
                <template #default>
                  <el-image
                    src="/img/222.jpg"
                    style="height: 60px; width: 60px"
                    fit="cover"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column
                prop="repair"
                label="修复策略"
              />
            </el-table>
          </div>
        </UniTitleBox>
      </div>
    </div>
  </NuxtLayout>
</template>

<script lang="ts" setup>
definePageMeta({
  layout: false,
});

const station = ref("上海音乐厅");

const legend = reactive<{ color: string; label: string }[]>([
  {
    color: "#F56C6C",
    label: "Danger",
  },
  {
    color: "#67C23A",
    label: "SUCCESS",
  },
  {
    color: "#E6A23C",
    label: "Warning",
  },
]);

const tableData = [
  {
    id: "开裂_1",
    date: "翼尖下缘",
    name: "严重",
    time: "5cm",
    repair: "修复策略1",
  },
  {
    id: "凹陷_2",
    date: "翼尖下缘",
    name: "损伤数量2",
    time: "20cm",
    repair: "修复策略2",
  },
  {
    id: "裂缝_3",
    date: "翼尖下缘",
    name: "损伤数量3",
    time: "10cm",
    repair: "修复策略3",
  },
  {
    id: "裂缝_3",
    date: "翼尖下缘",
    name: "损伤数量3",
    time: "10cm",
    repair: "修复策略3",
  },
  {
    id: "裂缝_3",
    date: "翼尖下缘",
    name: "损伤数量3",
    time: "10cm",
    repair: "修复策略3",
  },
  {
    id: "裂缝_3",
    date: "翼尖下缘",
    name: "损伤数量3",
    time: "10cm",
    repair: "修复策略3",
  },
];
</script>

<style lang="scss" scoped>
@mixin block($block) {
  .#{$block} {
    @content;
  }
}

@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@include block(legend) {
  display: flex;
  @apply gap-4;
  @include element(item) {
    height: 100%;
    @apply text-sm flex items-center justify-center gap-2;
  }
}

@include block("info") {
  @apply flex gap-2 mb-2;
  // max-height: 50vh;
  max-height: 400px;
  background-color: var(--bg);
  @include element("img") {
    flex: 3;
  }

  @include element("summary") {
    flex: 1;
    @apply p-4;
  }
}

@include block("img") {
  @apply flex gap-2 h-full;
  @include element("origin") {
    flex: 1;
    height: 100%;
  }

  @include element("detected") {
    flex: 1;
    height: 100%;
  }
}

@include block(tips) {
  // @apply p-2 m-2;
  @apply p-4 mb-2;
}
</style>
